<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">

        <div v-if="matchStatus===false">
          <el-select v-model="timeValue" placeholder="请选择时长">
            <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="jumpStart">开始模拟竞赛</el-button>
        </div>
        <div v-else>

          <p style="font-size: 24px">当前剩余时间：{{ minutes }}分钟</p>
          <!--          <span style="font-size: 20px; color: #409EFF">剩余时间：{{ mockMatchRecord.createTime }}分钟</span>-->

          <span style="font-size: 20px; color: #50eca2;margin-left: 300px">当前AC题目数：{{acCount}}</span>
        </div>
      </div>
      <div v-if="matchStatus===true" style="min-height: 500px">

        <el-tabs :tab-position="tabPosition">
          <el-tab-pane
              v-for="(question, index) in questionList"
              :key="index"
              :label="question.name"
          >
            <Program :question-id="question.id"></Program>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>


import {mockMatchFindById, mockMatchQuestionList, mockMatchStart} from "@/api/mock-match";
import Program from "@/components/MockMatch/Program.vue";
import Da from "element-ui/src/locale/lang/da";

export default {
  components: {Program,},
  data() {
    return {
      acCount:0,
      minutes: 0,
      seconds: 0,
      deadlineTime: Date.now() + 1000 * 60,
      syTimes: 30,
      matchStatus: false,
      progress: 0,
      matchId: "",
      mockMatchRecord: {},
      questionList: [],
      timeOptions: [
        {
          label: '30分钟',
          value: 30,
          num: 4
        },
        {
          label: '60分钟',
          value: 60,
          num: 5

        }, {
          label: '90分钟',
          value: 90,
          num: 7

        },
        {
          label: '120分钟',
          value: 120,
          num: 9

        },
      ],
      timeValue: '',
      tabPosition: 'top'
    }
  },
  mounted() {

  },
  methods: {
    startCountdown(minutes) {
      this.minutes = minutes;
      this.seconds = 0;
      this.countdown = setInterval(() => {
        if (this.seconds === 0) {
          if (this.minutes === 0) {
            clearInterval(this.countdown);
            this.countdown = null;
            this.endHook();
          } else {
            this.minutes--;
            this.seconds = 59;
          }
        } else {
          this.seconds--;
        }
      }, 1000);
    },
    endHook() {
      // 在这里编写倒计时结束时的钩子函数逻辑
      console.log("倒计时结束");
    },
    // timeInterval() {
    //   mockMatchFindById(this.matchId).then(res => {
    //
    //     // 假设已经获取到后端返回的对象 data
    //     const timeMinute = data.timeMinute;
    //     const createTime = new Date(data.createTime);
    //     // 计算当前时间与createTime的差值
    //     const currentTime = new Date();
    //     const diffTime = currentTime - createTime;
    //
    //     // 将差值除以60得到分钟数
    //     this.syTimes=Math.floor(diffTime / (1000 * 60))
    //     // 使用定时器每隔一段时间更新剩余时间
    //     setInterval(() => {
    //       const currentTime = new Date();
    //       const diffTime = currentTime - createTime;
    //       this.syTimes = Math.floor(diffTime / (1000 * 60));
    //       console.log('剩余时间：', this.syTimes, '分钟');
    //     }, 1000 * 60); // 每隔1分钟更新一次
    //   })
    //
    // },
    startProgress() {
      const interval = setInterval(() => {
        this.progress += 10;
        if (this.progress >= 100) {
          clearInterval(interval);
        }
      }, 1000);


    },
    jumpStart() {
      let num = 5;
      for (let i = 0; i < this.timeOptions.length; i++) {
        if (this.timeValue === this.timeOptions[i].value)
          num = this.timeOptions[i].num
      }
      let req = {
        time: this.timeValue,
        questionNum: num
      }
      mockMatchStart(req).then(res => {
        this.matchId = res.data
        var key='match'+this.matchId;
        var ac = localStorage.getItem(key);
        if(ac==null){
          ac=0
        }
        this.acCount=ac
        localStorage.setItem("matchId", this.matchId)
        mockMatchFindById(this.matchId).then(res => {
          this.mockMatchRecord = res.data
          const currentTime = new Date();
          const startDate = new Date(this.mockMatchRecord.createTime)
          const diff = currentTime.getTime() - startDate.getTime()

          console.log(diff)
          const diffMin = Math.floor(diff / (60 * 1000));


          this.startCountdown(diffMin)
        })
        // this.timeInterval()

        mockMatchQuestionList(this.matchId).then(res => {
              this.questionList = res.data
            }
        )
        this.matchStatus = true
      })
    }
  }
}
</script>

<style scoped>

</style>
